<template>
  <div class="container">
    <el-container>
      <el-header style="height:auto">
          <topbar></topbar>
      </el-header>
      <el-container class="bodyContainer">
        <el-aside width="250px">
            <leftbar></leftbar>
        </el-aside>
        <el-main>
            <mainbar></mainbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import leftbar from './components/leftbar.vue'
import mainbar from './components/mainbar.vue'
import topbar from './components/topbar.vue'
export default {
  name: "home",
  data() {
    return {
      activeIndex: "1"
    };
  },
  components:{
      leftbar,mainbar,topbar
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>
<style lang="scss" scoped>

@import"@assets/style/variables.scss";
.el-header{
    padding: 0;
    height: auto;
}
.el-main {
  padding: 0;
}
.bodyContainer{
    .el-aside{
        height: calc(100vh - 40px);
    }
}
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
</style>